<!--<h1>组件预览</h1> -->
<template>
  <div class="proview">
    <ul>
      <!-- 1 -->
      <li>
        <p>
          <span>cl-context-menu</span>
          <i>右键菜单</i>
        </p>
        <p>
          <a href="#"><button>右键单击</button></a>
        </p>
        <p>2019/10/23</p>
      </li>
      <!-- 2 -->
      <li>
        <p>
          <span>cl-crud</span>
          <i>增删改查，加强</i>
        </p>
        <p><a href="">传送门</a></p>
        <p>2019/10/25</p>
      </li>
      <!-- 3 -->
      <li>
        <p>
          <span>cl-upload</span>
          <i>图片上传</i>
        </p>
        <p><a href="">传送门</a></p>
        <p>2019/10/25</p>
      </li>
      <!-- 4 -->
      <li>
        <p>
          <span>cl-editor-quill</span>
          <i>Quill富文本编辑器</i>
        </p>
        <p><a href="">传送门</a></p>
        <p>2019/11/07</p>
      </li>
      <!-- 5 -->
      <li>
        <p>
          <span>cl-svg</span>
          <i>svg图片库</i>
        </p>
        <p class="p_icon">
          <a href="">
            <i class="iconfont icon-aixin"></i>
          </a>
          <a href="">
            <i class="iconfont icon-24gf-playCircle"></i>
          </a>
          <a href="">
            <i class="iconfont icon-shuju"></i>
          </a>
          <a href="">
            <i class="iconfont icon-liebiao2"></i>
          </a>
          <a href="">
            <i class="iconfont icon-shoucang"></i>
          </a>
        </p>
        <p>2019/9/25</p>
      </li>
      <!-- 6 -->
      <li>
        <p>
          <span>v-copy</span>
          <i>复制到剪贴板</i>
        </p>
        <p>
          <a href="#"><button>https://cool-js.comm 点击复制</button></a>
        </p>
        <p>2019/9/25</p>
      </li>
    </ul>
  </div>
</template>

<style>
.el-main {
  padding-top: 0;
  padding-right: 0;
}
</style>

<style lang="scss">
.proview {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      width: 24%;
      height: 150px;
      background-color: #fff;
      margin: 0 12px 12px 0;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      p {
        line-height: 2;
        margin-bottom: 15px;
        span {
          display: inline-block;
          background-color: #4165d7;
          border-radius: 3px;
          padding: 3px 5px;
          line-height: 1;
          margin-right: 10px;
          font-size: 14px;
          letter-spacing: 1px;
          color: #fff;
        }
        i {
          font-style: normal;
          font-size: 14px;
          color: #000;
        }
        a {
          font-size: 14px;
          button {
            padding: 6px 12px;
            font-size: 13px;
            color: #fff;
            background-color: #67c23a;
            border: none;
            border-radius: 5px;
          }
        }
      }

      p:nth-of-type(3) {
        margin-top: 22px;
        font-size: 12px;
        color: #c3c3c3;
      }

      p:nth-of-type(2) {
        margin-top: 22px;
      }

      .p_icon {
        .iconfont {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>

<script></script>
